import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal} from 'antd-mobile';
class DialogBox extends Component {
  constructor(props){
    super(props);
    this.state = {
      alertStatus: false, //是否显示提示框

      title:'提示', //标题
      content:'', //提示内容
      cancelText:'取消',
      confirmText:'确认',
      popup: false,//是否弹窗模式
      maskClosable: true,//点击蒙层是否允许关闭
      animationType: 'fade', // 'slide-down / up' / 'fade' / 'slide'
      isShowCancel:false, //是否显示确认按钮
      isShowConfirm:true, //是否显示确认按钮
      closable: false,//是否显示关闭按钮
      cancelCallbackFn:function(){}, //取消 回调函数
      confirmCallbackFn:function (){}//确认 回调函数
    }
  }

  //打开提示框
  open(options){
    options = options || {};
    options.alertStatus = true;
    this.setState({
      ...options
    })
  }
  //取消
  cancel(){
    this.state.cancelCallbackFn();
    this.close()
  }
  //确认
  confirm () {
    this.state.confirmCallbackFn();
    this.close()
  }
  close (){
    this.setState({
      alertStatus:false
    })
  }

  render(){
    let opts = this.state;
    let footer = [];
    if (opts.isShowCancel){
      footer.push({ text: opts.cancelText, onPress: () => this.cancel() })
    }
    if (opts.isShowConfirm){
      footer.push({ text: opts.confirmText, onPress: () => this.confirm() })
    }
    return (
        <Modal
          popup={opts.popup}
          visible={opts.alertStatus}
          transparent
          closable={opts.closable}
          animationType={opts.animationType}
          maskClosable={opts.maskClosable}
          title={opts.title}
          footer={footer}
          onClose={()=>this.cancel()}
          afterClose={() => this.cancel()}
        >
          <p>{opts.content}</p>
        </Modal>
    )
  }
}

let div = document.createElement('div');
document.body.appendChild(div);
let DialogAlert = ReactDOM.render(<DialogBox /> ,div);

export default DialogAlert;
